<!-- 模板 -->
<template>
  <div class="center">
    <div>
      {{ prentNum }}
    </div>
    <div>
      <button @click="add()">+</button>
      <button @click="sub()">-</button>
    </div>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
export default {
  name: '',
  data() {
    return {}
  },
  props: ['prentNum'],
  components: {},
  computed: {},
  filters: {},
  methods: {
    add() {
      let num = this.prentNum
      num++
      this.$emit('addNum', num)
    },
    sub() {
      let num = this.prentNum
      num--
      this.$emit('subNum', num)
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.center {
  background-color: aqua;
  //计算容器的高度是视口高度减去顶部高度和页脚高度
  height: calc(100vh - 2.2rem);
  //设置容器为flex布局
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  button {
    width: 1rem;
    height: 1rem;
  }
}
</style>
